<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="单据编号" prop="wayBillNumber">
        <el-input
          v-model="queryParams.wayBillNumber"
          placeholder="请输入单据编号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <!--el-form-item label="单据状态" prop="wayBillStatus">
        <el-select v-model="queryParams.wayBillStatus" placeholder="请选择单据状态" clearable>
          <el-option
            v-for="dict in dict.type.way_bill_status"
            :key="dict.value"
            :label="dict.label"
            :value="dict.label"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="录单时间">
        <el-date-picker
          v-model="daterangeRecordTime"
          style="width: 205px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="发货地址" prop="sendGoodsAddress">
        <el-input
          v-model="queryParams.sendGoodsAddress"
          placeholder="请输入发货地址"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item-->
      <el-form-item label="收货地址" prop="receiveGoodsAddress">
        <el-input
          v-model="queryParams.receiveGoodsAddress"
          placeholder="请输入收货地址"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="车牌号码" prop="vehicleLicenseNumber">
        <el-input
          v-model="queryParams.vehicleLicenseNumber"
          placeholder="请输入车牌号码"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="司机姓名" prop="driverName">
        <el-input
          v-model="queryParams.driverName"
          placeholder="请输入司机姓名"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <!--el-form-item label="司机电话" prop="contactMobile">
        <el-input
          v-model="queryParams.contactMobile"
          placeholder="请输入司机电话"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="司机工资" prop="driverSalary">
        <el-input
          v-model="queryParams.driverSalary"
          placeholder="请输入司机工资"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="货物类型" prop="goodsType">
        <el-select v-model="queryParams.goodsType" placeholder="请选择货物类型" clearable>
          <el-option
            v-for="dict in dict.type.goods_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.label"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="运费计价" prop="freightPriceMode">
        <el-select v-model="queryParams.freightPriceMode" placeholder="请选择运费计价" clearable>
          <el-option
            v-for="dict in dict.type.price_mode"
            :key="dict.value"
            :label="dict.label"
            :value="dict.label"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="运费价格" prop="freightPrice">
        <el-input
          v-model="queryParams.freightPrice"
          placeholder="请输入运费价格"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="重量(吨)" prop="freightWeight">
        <el-input
          v-model="queryParams.freightWeight"
          placeholder="请输入重量(吨)"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="运费金额" prop="freightAmount">
        <el-input
          v-model="queryParams.freightAmount"
          placeholder="请输入运费金额"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item-->
      <el-form-item label="收款状态" prop="collectionStatus">
        <el-select v-model="queryParams.collectionStatus" placeholder="请选择收款状态" clearable>
          <el-option
            v-for="dict in dict.type.collection_status"
            :key="dict.value"
            :label="dict.label"
            :value="dict.label"
          />
        </el-select>
      </el-form-item>
      <!--el-form-item label="收款日期">
        <el-date-picker
          v-model="daterangeCollectionDate"
          style="width: 205px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="现金补气" prop="cashSupplementGas">
        <el-input
          v-model="queryParams.cashSupplementGas"
          placeholder="请输入现金补气"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="加气费" prop="addGasFee">
        <el-input
          v-model="queryParams.addGasFee"
          placeholder="请输入加气费"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="路费(现金)" prop="tollFeeCash">
        <el-input
          v-model="queryParams.tollFeeCash"
          placeholder="请输入路费(现金)"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="路费(ETC)" prop="tollFeeEtc">
        <el-input
          v-model="queryParams.tollFeeEtc"
          placeholder="请输入路费(ETC)"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="罚款" prop="forfeit">
        <el-input
          v-model="queryParams.forfeit"
          placeholder="请输入罚款"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="信息费" prop="informationFee">
        <el-input
          v-model="queryParams.informationFee"
          placeholder="请输入信息费"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="修车费" prop="repairTruckFee">
        <el-input
          v-model="queryParams.repairTruckFee"
          placeholder="请输入修车费"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="服务站修车" prop="serviceStationRepair">
        <el-input
          v-model="queryParams.serviceStationRepair"
          placeholder="请输入服务站修车"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="保险费" prop="insurancePremium">
        <el-input
          v-model="queryParams.insurancePremium"
          placeholder="请输入保险费"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="轮胎费" prop="tireFee">
        <el-input
          v-model="queryParams.tireFee"
          placeholder="请输入轮胎费"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="其他" prop="otherFee">
        <el-input
          v-model="queryParams.otherFee"
          placeholder="请输入其他"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="支出总计" prop="expenditureTotal">
        <el-input
          v-model="queryParams.expenditureTotal"
          placeholder="请输入支出总计"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="利润" prop="profit">
        <el-input
          v-model="queryParams.profit"
          placeholder="请输入利润"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="单据备注" prop="wayBillRemark">
        <el-input
          v-model="queryParams.wayBillRemark"
          placeholder="请输入单据备注"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="工资单号" prop="salaryBillNumber">
        <el-input
          v-model="queryParams.salaryBillNumber"
          placeholder="请输入工资单号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="数据权限" prop="dataRealm">
        <el-input
          v-model="queryParams.dataRealm"
          placeholder="请输入数据权限"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="园区代码" prop="parkCode">
        <el-input
          v-model="queryParams.parkCode"
          placeholder="请输入园区代码"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item-->
      <el-form-item label="创建者" prop="createBy">
        <el-input
          v-model="queryParams.createBy"
          placeholder="请输入创建者"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="创建时间">
        <el-date-picker
          v-model="daterangeCreateTime"
          style="width: 205px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['waybills:waybillext:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['waybills:waybillext:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['waybills:waybillext:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['waybills:waybillext:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" @computeTable="computeTableHeight"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="waybillextList" @selection-change="handleSelectionChange" border :height="tableHeight" :row-style="{height:'35px'}" :cell-style="{padding:'0px'}">
      <el-table-column type="selection" width="45" align="center" />
      <el-table-column type="index" prop="" width="55" label="序号" align="center" >
        <template slot-scope="scope">
          <span>{{ scope.$index+1 +(queryParams.pageNum-1)*queryParams.pageSize }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="100%">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['waybills:waybillext:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['waybills:waybillext:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
      <!--el-table-column label="单据ID" align="center" prop="wayBillId" /-->
      <el-table-column label="单据编号" align="center" prop="wayBillNumber" width="100" />
      <!--el-table-column label="单据状态" align="center" prop="wayBillStatus" /-->
      <el-table-column label="录单时间" align="center" prop="recordTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.recordTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="发货地址" align="center" prop="sendGoodsAddress" width="240" :show-overflow-tooltip="true" />
      <el-table-column label="收货地址" align="center" prop="receiveGoodsAddress" width="240" :show-overflow-tooltip="true" />
      <el-table-column label="车牌号码" align="center" prop="vehicleLicenseNumber" width="90" />
      <el-table-column label="司机姓名" align="center" prop="driverName" />
      <el-table-column label="司机电话" align="center" prop="contactMobile" width="110" />
      <el-table-column label="司机工资" align="center" prop="driverSalary" />
      <el-table-column label="货物类型" align="center" prop="goodsType" />
      <el-table-column label="运费计价" align="center" prop="freightPriceMode" />
      <el-table-column label="运费价格" align="center" prop="freightPrice" />
      <el-table-column label="重量(吨)" align="center" prop="freightWeight" />
      <el-table-column label="运费金额" align="center" prop="freightAmount" />
      <el-table-column label="收款状态" align="center" prop="collectionStatus" />
      <el-table-column label="收款日期" align="center" prop="collectionDate" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.collectionDate, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="现金补气" align="center" prop="cashSupplementGas" />
      <el-table-column label="加气费" align="center" prop="addGasFee" />
      <el-table-column label="路费(现金)" align="center" prop="tollFeeCash" width="90" />
      <el-table-column label="路费(ETC)" align="center" prop="tollFeeEtc" width="90" />
      <el-table-column label="罚款" align="center" prop="forfeit" />
      <el-table-column label="信息费" align="center" prop="informationFee" />
      <el-table-column label="修车费" align="center" prop="repairTruckFee" />
      <el-table-column label="服务站修车" align="center" prop="serviceStationRepair" width="90" />
      <el-table-column label="保险费" align="center" prop="insurancePremium" />
      <el-table-column label="轮胎费" align="center" prop="tireFee" />
      <el-table-column label="其他" align="center" prop="otherFee" />
      <el-table-column label="支出总计" align="center" prop="expenditureTotal" />
      <el-table-column label="利润" align="center" prop="profit" />
      <el-table-column label="单据备注" align="center" prop="wayBillRemark" />
      <!--el-table-column label="工资单号" align="center" prop="salaryBillNumber" />
      <el-table-column label="数据权限" align="center" prop="dataRealm" />
      <el-table-column label="园区代码" align="center" prop="parkCode" /-->
      <el-table-column label="创建者" align="center" prop="createBy" />
      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
    </el-table>
    
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改运单扩展对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="单据编号" prop="wayBillNumber">
          <el-input v-model="form.wayBillNumber" placeholder="请输入单据编号" :disabled="true" />
        </el-form-item>
        <!--el-form-item label="单据状态" prop="wayBillStatus">
          <el-select v-model="form.wayBillStatus" placeholder="请选择单据状态" style="width: 340px;">
            <el-option
              v-for="dict in dict.type.way_bill_status"
              :key="dict.value"
              :label="dict.label"
              :value="dict.label"
            ></el-option>
          </el-select>
        </el-form-item-->
        <el-form-item label="录单时间" prop="recordTime">
          <el-date-picker clearable
            v-model="form.recordTime"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="请选择录单时间"
            style="width: 340px;">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="发货地址" prop="sendGoodsAddress">
          <el-input v-model="form.sendGoodsAddress" placeholder="请输入发货地址" />
        </el-form-item>
        <el-form-item label="收货地址" prop="receiveGoodsAddress">
          <el-input v-model="form.receiveGoodsAddress" placeholder="请输入收货地址" />
        </el-form-item>
        <el-form-item label="车牌号码" prop="vehicleLicenseNumber">
          <el-input v-model="form.vehicleLicenseNumber" placeholder="请输入车牌号码" />
        </el-form-item>
        <el-form-item label="司机姓名" prop="driverName">
          <el-input v-model="form.driverName" placeholder="请输入司机姓名" />
        </el-form-item>
        <el-form-item label="司机电话" prop="contactMobile">
          <el-input v-model="form.contactMobile" placeholder="请输入司机电话" />
        </el-form-item>
        <el-form-item label="司机工资" prop="driverSalary">
          <el-input v-model="form.driverSalary" placeholder="请输入司机工资" type="number" @change = "hanleChangeProfit" />
        </el-form-item>
        <el-form-item label="货物类型" prop="goodsType">
          <el-select v-model="form.goodsType" placeholder="请选择货物类型" style="width: 340px;">
            <el-option
              v-for="dict in dict.type.goods_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="运费计价" prop="freightPriceMode">
          <el-select v-model="form.freightPriceMode" placeholder="请选择运费计价" style="width: 340px;" @change="hanleChangeFreightAmount">
            <el-option
              v-for="dict in dict.type.price_mode"
              :key="dict.value"
              :label="dict.label"
              :value="dict.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="运费价格" prop="freightPrice">
          <el-input v-model="form.freightPrice" placeholder="请输入运费价格" @change="hanleChangeFreightAmount" />
        </el-form-item>
        <el-form-item label="重量(吨)" prop="freightWeight">
          <el-input v-model="form.freightWeight" placeholder="请输入重量(吨)" @change="hanleChangeFreightAmount" />
        </el-form-item>
        <el-form-item label="运费金额" prop="freightAmount">
          <el-input v-model="form.freightAmount" placeholder="请输入运费金额" :disabled="true"/>
        </el-form-item>
        <!--el-form-item label="收款状态" prop="collectionStatus">
          <el-select v-model="form.collectionStatus" placeholder="请选择收款状态" style="width: 340px;">
            <el-option
              v-for="dict in dict.type.collection_status"
              :key="dict.value"
              :label="dict.label"
              :value="dict.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="收款日期" prop="collectionDate">
          <el-date-picker clearable
            v-model="form.collectionDate"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="请选择收款日期"
            style="width: 340px;">
          </el-date-picker>
        </el-form-item-->
        <el-form-item label="现金补气" prop="cashSupplementGas">
          <el-input v-model="form.cashSupplementGas" placeholder="请输入现金补气" @change = "hanleChangeExpenses" />
        </el-form-item>
        <el-form-item label="加气费" prop="addGasFee">
          <el-input v-model="form.addGasFee" placeholder="请输入加气费" @change = "hanleChangeExpenses" />
        </el-form-item>
        <el-form-item label="路费(现金)" prop="tollFeeCash">
          <el-input v-model="form.tollFeeCash" placeholder="请输入路费(现金)" @change = "hanleChangeExpenses" />
        </el-form-item>
        <el-form-item label="路费(ETC)" prop="tollFeeEtc">
          <el-input v-model="form.tollFeeEtc" placeholder="请输入路费(ETC)" @change = "hanleChangeExpenses" />
        </el-form-item>
        <el-form-item label="罚款" prop="forfeit">
          <el-input v-model="form.forfeit" placeholder="请输入罚款" @change = "hanleChangeExpenses" />
        </el-form-item>
        <el-form-item label="信息费" prop="informationFee">
          <el-input v-model="form.informationFee" placeholder="请输入信息费" @change = "hanleChangeExpenses" />
        </el-form-item>
        <el-form-item label="修车费" prop="repairTruckFee">
          <el-input v-model="form.repairTruckFee" placeholder="请输入修车费" @change = "hanleChangeExpenses" />
        </el-form-item>
        <el-form-item label="服务站修车" prop="serviceStationRepair">
          <el-input v-model="form.serviceStationRepair" placeholder="请输入服务站修车" @change = "hanleChangeExpenses" />
        </el-form-item>
        <el-form-item label="保险费" prop="insurancePremium">
          <el-input v-model="form.insurancePremium" placeholder="请输入保险费" @change = "hanleChangeExpenses" />
        </el-form-item>
        <el-form-item label="轮胎费" prop="tireFee">
          <el-input v-model="form.tireFee" placeholder="请输入轮胎费" @change = "hanleChangeExpenses" />
        </el-form-item>
        <el-form-item label="其他" prop="otherFee">
          <el-input v-model="form.otherFee" placeholder="请输入其他" @change = "hanleChangeExpenses" />
        </el-form-item>
        <el-form-item label="支出总计" prop="expenditureTotal">
          <el-input v-model="form.expenditureTotal" placeholder="请输入支出总计" :disabled="true" />
        </el-form-item>
        <el-form-item label="利润" prop="profit">
          <el-input v-model="form.profit" placeholder="请输入利润" :disabled="true" />
        </el-form-item>
        <el-form-item label="单据备注" prop="wayBillRemark">
          <el-input v-model="form.wayBillRemark" placeholder="请输入单据备注" />
        </el-form-item>
        <!--el-form-item label="工资单号" prop="salaryBillNumber">
          <el-input v-model="form.salaryBillNumber" placeholder="请输入工资单号" />
        </el-form-item>
        <el-form-item label="数据权限" prop="dataRealm">
          <el-input v-model="form.dataRealm" placeholder="请输入数据权限" />
        </el-form-item>
        <el-form-item label="园区代码" prop="parkCode">
          <el-input v-model="form.parkCode" placeholder="请输入园区代码" />
        </el-form-item-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listWaybillext, getWaybillext, delWaybillext, addWaybillext, updateWaybillext } from "@/api/waybills/waybillext";
import { listNumber, getNumber, getOneNumber, delNumber, addNumber, updateNumber } from "@/api/system/number";
import { isNotNull } from "@/utils/validate";

export default {
  name: "Waybillext",
  dicts: ['price_mode', 'way_bill_status', 'goods_type', 'collection_status'],
  data() {
    return {
      // 定义列表高度
      tableHeight: 430,
      // 定义查询高度
      queryHeight: 200,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 运单扩展表格数据
      waybillextList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 园区代码时间范围
      daterangeRecordTime: [],
      // 园区代码时间范围
      daterangeCollectionDate: [],
      // 园区代码时间范围
      daterangeCreateTime: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        wayBillNumber: null,
        wayBillStatus: null,
        recordTime: null,
        sendGoodsAddress: null,
        receiveGoodsAddress: null,
        vehicleLicenseNumber: null,
        driverName: null,
        contactMobile: null,
        driverSalary: null,
        goodsType: null,
        freightPriceMode: null,
        freightPrice: null,
        freightWeight: null,
        freightAmount: null,
        collectionStatus: null,
        collectionDate: null,
        cashSupplementGas: null,
        addGasFee: null,
        tollFeeCash: null,
        tollFeeEtc: null,
        forfeit: null,
        informationFee: null,
        repairTruckFee: null,
        serviceStationRepair: null,
        insurancePremium: null,
        tireFee: null,
        otherFee: null,
        expenditureTotal: null,
        profit: null,
        wayBillRemark: null,
        salaryBillNumber: null,
        dataRealm: null,
        parkCode: null,
        createBy: null,
        createTime: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        wayBillId: [
          { required: true, message: "单据ID不能为空", trigger: "blur" }
        ],
      }
    };
  },
  created() {
    this.getList();
  },
  mounted() {
    this.$nextTick(() =>{
      // 根据浏览器高度设置初始高度 - 按钮行高度28 - 页码行高度28 - （面包屑+TAB行）高度160
      this.queryHeight = this.$refs.queryForm.$el.offsetHeight;
      this.tableHeight = window.innerHeight - this.$refs.queryForm.$el.offsetHeight - 28 - 28 - 160;
      // 监听浏览器高度变化，改变表格高度
      window.onresize = () =>{
        this.tableHeight = window.innerHeight - this.$refs.queryForm.$el.offsetHeight - 28 - 28 - 160;
      }
    })
  },
  methods: {
    /** 查询运单扩展列表 */
    getList() {
      this.loading = true;
      this.queryParams.params = {};
      if (null != this.daterangeRecordTime && '' != this.daterangeRecordTime) {
        this.queryParams.params["beginRecordTime"] = this.daterangeRecordTime[0];
        this.queryParams.params["endRecordTime"] = this.daterangeRecordTime[1];
      }
      if (null != this.daterangeCollectionDate && '' != this.daterangeCollectionDate) {
        this.queryParams.params["beginCollectionDate"] = this.daterangeCollectionDate[0];
        this.queryParams.params["endCollectionDate"] = this.daterangeCollectionDate[1];
      }
      if (null != this.daterangeCreateTime && '' != this.daterangeCreateTime) {
        this.queryParams.params["beginCreateTime"] = this.daterangeCreateTime[0];
        this.queryParams.params["endCreateTime"] = this.daterangeCreateTime[1];
      }
      listWaybillext(this.queryParams).then(response => {
        this.waybillextList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        wayBillId: null,
        wayBillNumber: null,
        wayBillStatus: null,
        recordTime: null,
        sendGoodsAddress: null,
        receiveGoodsAddress: null,
        vehicleLicenseNumber: null,
        driverName: null,
        contactMobile: null,
        driverSalary: null,
        goodsType: null,
        freightPriceMode: null,
        freightPrice: null,
        freightWeight: null,
        freightAmount: null,
        collectionStatus: null,
        collectionDate: null,
        cashSupplementGas: null,
        addGasFee: null,
        tollFeeCash: null,
        tollFeeEtc: null,
        forfeit: null,
        informationFee: null,
        repairTruckFee: null,
        serviceStationRepair: null,
        insurancePremium: null,
        tireFee: null,
        otherFee: null,
        expenditureTotal: null,
        profit: null,
        wayBillRemark: null,
        salaryBillNumber: null,
        dataRealm: null,
        parkCode: null,
        delFlag: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.daterangeRecordTime = [];
      this.daterangeCollectionDate = [];
      this.daterangeCreateTime = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.wayBillId)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      /** Date原型添加如下的方法 */
      Date.prototype.format = function(fmt) { 
        var o = { 
            "M+" : this.getMonth()+1,                 //月份 
            "d+" : this.getDate(),                    //日 
            "h+" : this.getHours(),                   //小时 
            "m+" : this.getMinutes(),                 //分 
            "s+" : this.getSeconds(),                 //秒 
            "q+" : Math.floor((this.getMonth()+3)/3), //季度 
            "S"  : this.getMilliseconds()             //毫秒 
        }; 
        if(/(y+)/.test(fmt)) {
                fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length)); 
        }
        for(var k in o) {
            if(new RegExp("("+ k +")").test(fmt)){
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
            }
        }
        return fmt; 
      };
      this.reset();
//      this.open = true;
      this.title = "添加运单扩展";
      const numberPersistenceId = 1
      getOneNumber(numberPersistenceId).then(response => {
        let number = new String(response.data.number);
        let format = "000000000"; //"123456789";
        let length = number.length;
        if(length < 10) {
          this.$set(this.form, 'wayBillNumber', format.substring(0, 9 - length) + number);
        } else {
          this.$set(this.form, 'wayBillNumber', number.substring(length - 9, length));
        }
        this.open = true;
      });

      {
        this.title = "添加运单扩展";
//        this.$set(this.form, 'wayBillStatus', '待发运'); // 初始状态：待发运
        this.$set(this.form, 'recordTime', new Date().format("yyyy-MM-dd hh:mm:ss"));
        this.$set(this.form, 'collectionStatus', '未收款');
      }
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const wayBillId = row.wayBillId || this.ids
      getWaybillext(wayBillId).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改运单扩展";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.wayBillId != null) {
            updateWaybillext(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addWaybillext(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const wayBillIds = row.wayBillId || this.ids;
      this.$modal.confirm('是否确认删除运单扩展编号为"' + wayBillIds + '"的数据项？').then(function() {
        return delWaybillext(wayBillIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('waybills/waybillext/export', {
        ...this.queryParams
      }, `waybillext_${new Date().getTime()}.xlsx`)
    },
    computeTableHeight(){
      if( this.showSearch==true ){
        this.tableHeight = window.innerHeight - this.queryHeight - 28 - 28 - 160;
      } else {
        this.tableHeight = window.innerHeight - 28 - 28 - 160;
      }
    },
    hanleChangeProfit(value){
//      console.log('hanleChangeProfit', value);
      if (isNotNull(this.form.driverSalary) && isNotNull(this.form.freightAmount)) {
        this.form.profit = Math.round((this.form.freightAmount - this.form.driverSalary - this.form.expenditureTotal) * 100) / 100;
      } else {
        this.form.profit = '';
      }
    },
    hanleChangeFreightAmount(value){
//      console.log('hanleChangeFreightAmount', value);
      if(this.form.freightPriceMode == '按吨'){
        if(isNotNull(this.form.freightPrice) && isNotNull(this.form.freightWeight)){
  //        console.log('this.form.freightPrice', this.form.freightPrice);
  //        console.log('this.form.freightWeight', this.form.freightWeight);
          this.form.freightAmount = Math.round((this.form.freightPrice * this.form.freightWeight) * 100) / 100;
        } else {
          this.form.freightAmount = '';
        }
      } else {
        if(isNotNull(this.form.freightPrice)){
          this.form.freightAmount = Math.round(this.form.freightPrice * 100) / 100;
        } else {
          this.form.freightAmount = '';
        }
      }
      this.hanleChangeProfit(0);
    },
    hanleChangeExpenses(value){
//      console.log('hanleChangeExpenses', value);
//      console.log('this.form.cashSupplementGas', this.form.cashSupplementGas);
//      console.log('this.form.addGasFee', this.form.addGasFee);
//      console.log('this.form.tollFeeCash', this.form.tollFeeCash);
//      console.log('this.form.otherFee', this.form.otherFee);
      let total = 0.0;
      if(isNotNull(this.form.cashSupplementGas)){
        total = total + parseFloat(this.form.cashSupplementGas) ;
      }
      if(isNotNull(this.form.addGasFee)){
        total = total + parseFloat(this.form.addGasFee) ;
      }
      if(isNotNull(this.form.tollFeeCash)){
        total = total + parseFloat(this.form.tollFeeCash) ;
      }
      if(isNotNull(this.form.tollFeeEtc)){
        total = total + parseFloat(this.form.tollFeeEtc) ;
      }
      if(isNotNull(this.form.forfeit)){
        total = total + parseFloat(this.form.forfeit) ;
      }
      if(isNotNull(this.form.informationFee)){
        total = total + parseFloat(this.form.informationFee) ;
      }
      if(isNotNull(this.form.repairTruckFee)){
        total = total + parseFloat(this.form.repairTruckFee) ;
      }
      if(isNotNull(this.form.serviceStationRepair)){
        total = total + parseFloat(this.form.serviceStationRepair) ;
      }
      if(isNotNull(this.form.insurancePremium)){
        total = total + parseFloat(this.form.insurancePremium) ;
      }
      if(isNotNull(this.form.tireFee)){
        total = total + parseFloat(this.form.tireFee) ;
      }
      if(isNotNull(this.form.otherFee)){
        total = total + parseFloat(this.form.otherFee) ;
      }
//      console.log('total ', total);
      this.form.expenditureTotal = Math.round(total * 100) / 100;
      this.hanleChangeProfit(0);
    },
  }
};
</script>
